@import "./common/mixin.scss";
@import "./common/utils.scss";
@import "./common/vars.scss";

@include module(date-pick) {
  @include utils-user-select(none);
  display: inline-block;

  position: relative;

  @include element(dropdown) {
    min-height: 240px;
    z-index: 1000;
    transform-origin: top;
    position: absolute;
    margin: 12px 0 5px 0;
    border-radius: 4px;
    background: white;
    width: 340px;
    min-height: 100px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  }

  @include modifier(top) {
    .as-date-pick__dropdown {
      transform-origin: bottom;
      margin: 5px 0 12px 0;
      bottom: 40px;
    }
  }

  @include element(header) {
    display: flex;
    padding: 12px;
    font-size: $--font-size-base;
    line-height: 1;
    span {
      flex: 1;
      text-align: center;
      padding: 5px 0;
      font-weight: bold;
      .month,
      .year {
        cursor: pointer;
        &:hover {
          color: $--color-primary;
        }
      }
    }
    i {
      padding: 5px;
      cursor: pointer;
      &:hover {
        color: $--color-primary;
      }
    }
  }

  @include element(body) {
    padding: 15px;
    table {
      width: 100%;
      tbody {
        tr {
          margin: 24px 0;
          box-sizing: border-box;
          &:first-child {
            border-bottom: solid 1px
              mix($--color-white, $--border-color-disabled, 0%);
          }
          td {
            width: calc(100% / 7);
            display: inline-block;
            padding: 0;
            font-weight: normal;
            color: #606266;
            font-size: $--font-size-extra-small;
            line-height: 2;
            text-align: center;
            height: 40px;
            span {
              cursor: pointer;
              display: inline-block;
              width: 24px;
              line-height: 24px;
              height: 24px;
              text-align: center;
              margin: 8px 0;
              border-radius: 50%;
              background: $--color-white;
              &:hover {
                color: mix($--color-white, $--color-primary, 40%);
              }
              &.today {
                color: $--color-primary;
                background: $--color-white;
                font-weight: bold;
              }
              &.suff,
              &.prev {
                color: mix($--color-white, $--color-text-regular, 70%);
              }
              &.active {
                background: $--color-primary;
                color: white;
                font-weight: bold;
              }
            }
          }
          th {
            width: calc(100% / 7);
            display: inline-block;
            padding: 0;
            font-weight: normal;
            color: #606266;
            font-size: $--font-size-extra-small;
            line-height: 2;
            text-align: center;
            padding-bottom: 6px;
            border-bottom: solid 1px
              mix($--color-white, $--border-color-disabled, 0%);
          }
        }
      }
    }
  }

  @include element(month_body) {
    border-top: solid 1px mix($--color-white, $--border-color-disabled, 0%);
    padding: 0 15px;
    table {
      width: 100%;
      tbody {
        tr {
          margin: 24px 0;
          box-sizing: border-box;
          td {
            width: calc(100% / 4);
            display: inline-block;
            padding: 0;
            font-weight: normal;
            color: #606266;
            font-size: $--font-size-small;
            line-height: 60px;
            text-align: center;
            height: 60px;
            &:hover {
              span {
                color: $--color-primary;
              }
            }
            span {
              cursor: pointer;
              width: 100%;
              display: inline-block;
              line-height: inherit;
              height: inherit;
              text-align: center;
              border-radius: 50%;
              background: $--color-white;
              &.today {
                color: mix($--color-white, $--color-primary, 40%);
              }
              &.active {
                color: $--color-primary;
                font-weight: bold;
              }
            }
          }
        }
      }
    }
  }
}
